<template>
  <div class="roleWrap">
    <div class=" contrller">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
            v-model="logParams.username"
            placeholder="请输入账号"
            class="searchSty"
            @keyup.enter.native="searchList"
          >

            <!-- <template #append>
              <el-button :icon="'Search'" @click="searchList" />
            </template> -->
          </el-input>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="(e)=>changeDate(e)"
          />
        </el-col>

        <el-col :span="4">
          <el-button type="primary" :icon="'Search'" @click="searchList" >查询</el-button>

          <el-button type="primary" :icon="'RefreshRight'" @click="resetList">重置</el-button>

        </el-col>
      </el-row>
      
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" width="50">
        <template #default="scope">
          {{ (logParams.pageNum - 1) * logParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="功能" width="180" />
      <el-table-column prop="type" align="center" label="业务类型" width="180">
        <template #default="scope">
          <span>{{
            scope.row.type == 1
              ? '新增'
              : scope.row.type == 2
              ? '修改'
              : scope.row.type == 3
              ? '删除'
              : scope.row.type == 0
              ? '登录'
              : scope.row.type == 8
              ? '登出'
              : '其他'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="requestType" align="center" label="请求类型" />
      <el-table-column prop="operUserName" align="center" label="用户名" width="180" />
      <el-table-column prop="operUserAccount" align="center" label="账号" width="180" />
      <el-table-column prop="operTime" align="center" label="操作时间" />
      <el-table-column prop="operIp" align="center" label="IP" width="180" />
      <el-table-column prop="operParam" show-overflow-tooltip align="center" label="日志描述" width="180" />
      <el-table-column prop="operUrl" align="center" label="接口路径" />

      <!-- <el-table-column prop="action" label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="updateRoleFunc(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-popconfirm title="确定删除吗?" @confirm="deleteRoleFunc(scope.row.id)">
            <template #reference>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      class="mt-10"
      @current-change="changePage"
      :current-page="logParams.pageNum"
      :page-size="logParams.pageSize"
      background
      layout="prev, pager, next"
      :total="total"
      hide-on-single-page
    />
  </div>
</template>

<script >
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import { queryLogList } from '@/api/system/log/index.ts';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatToDate } from '@/utils/dateUtil';

export default defineComponent({
  setup() {
    const state = reactive({
      tableData: [],
      isUpdate: false,
      total: 1,
      centerDialogVisible: false,
      logParams: {
        username: '',
        nickname: '',
        pageSize: 15,
        pageNum: 1,
        operTimeStart:'',
        operTimeEnd:'',
      },
      dateValue:[],
    });
    const queryLogListFunc = () => {
      queryLogList(state.logParams).then((res) => {
        const { rows, total } = res;
        state.total = total;
        
        state.tableData = rows;
      });
    };
    const changePage = (val) => {
      state.logParams.pageNum = val;
      queryLogListFunc();
    };
    const changeDate = (val) => {
      console.log('val',val);
      // dayjs().endOf('day').format('YYYY-MM-DD'),
      let startDate = formatToDate(val[0], 'YYYY-MM-DD');
      let endDate = formatToDate(val[1], 'YYYY-MM-DD');
      // console.log("startDate",startDate);
      // console.log("endDate",endDate);
      state.dateValue = [startDate, endDate];
      state.logParams.operTimeStart = startDate;
      state.logParams.operTimeEnd = endDate;
    };
    const searchList = () => {
      state.logParams.pageNum = 1;
      queryLogListFunc();
    };
    const resetList = () => {
      state.logParams = {
        username: '',
        nickname: '',
        operTimeStart:'',
        operTimeEnd:'',
        pageSize: 30,
        pageNum: 1,
      };
      state.dateValue = [];
      queryLogListFunc();
    };

    onMounted(() => {
      queryLogListFunc();
    });
    return {
      ...toRefs(state),
      queryLogListFunc,
      changePage,
      changeDate,
      searchList,
      resetList,
    };
  },
});
</script>
<style lang="less" scoped>
.roleWrap {
  :deep(.el-table) {
    background-color: transparent !important;
    font-size: 0.7vw;
    thead {
      color: #333 !important;
    }
    tr {
      background-color: transparent !important;
      color: #333;
    }
    tr:hover > td {
      background: rgba(255, 255, 255, 0.1) !important;
    }
    th {
      background-color: transparent !important;
      border-bottom: none !important;
      color: #333;
    }
    &::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
  }
  :deep(.el-table--enable-row-transition .el-popper .is-light) {
    background-color: rgba(255, 255, 255, 1) !important;
    border: 1px solid #fff !important;
  }
  :deep(.el-input__inner) {
    color: #333 !important;
  }
  .treeWrap {
    width: 40%;
  }
  .iptwrap {
    :deep(.el-input__inner) {
      color: #333 !important;
    }
    margin-bottom: 20px;
    width: 60%;
    .iptwidth {
      width: 80%;
    }
    .mb-2 {
      margin-bottom: 20px;
    }
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      &::before {
        content: '*';
        color: #f5222d;
      }
    }
  }
  .listItem {
    width: 80%;
    .itemRight {
      button {
        font-weight: 400;
      }
    }
  }
  .searchSty {
    width: 300px;
    margin: 0 10px;
  }
  :deep(.el-date-editor .el-range-input) {
    color: #333 !important;
  }
  :deep(.el-popper) {
		max-width: 400px !important;
	}

}
</style>
